import {
  CheckCircleOutlined,
  CloseCircleOutlined,
  EditOutlined,
  EllipsisOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import { Card, Tag, theme } from 'antd';
import React, { ReactNode } from 'react';
import css from './index.less';
/**
 * 每个单独的卡片，为了复用样式抽成了组件
 * @param param0
 * @returns
 */
export interface InfoItem {
  label: ReactNode;
  value: ReactNode;
}
const InfoCard: React.FC<{
  title: string;
  index: number;
  list: InfoItem[];
}> = ({ title, index, list }) => {
  const { useToken } = theme;
  const { token } = useToken();
  return (
    <Card
      style={{
        borderRadius: 8,
      }}
      bodyStyle={{
        padding: 16,
      }}
      actions={[
        <SettingOutlined key="setting" />,
        <EditOutlined key="edit" />,
        <EllipsisOutlined key="ellipsis" />,
      ]}
    >
      {title ? (
        <Tag className={css['card-item-tag']} icon={<CheckCircleOutlined />} color="success">
          正常
        </Tag>
      ) : (
        <Tag className={css['card-item-tag']} icon={<CloseCircleOutlined />} color="error">
          禁用
        </Tag>
      )}

      <div
        style={{
          display: 'flex',
          gap: '4px',
          alignItems: 'center',
        }}
      >
        <div
          style={{
            width: 48,
            height: 48,
            lineHeight: '22px',
            backgroundSize: '100%',
            textAlign: 'center',
            padding: '8px 16px 16px 12px',
            color: '#FFF',
            fontWeight: 'bold',
            backgroundImage:
              "url('https://gw.alipayobjects.com/zos/bmw-prod/daaf8d50-8e6d-4251-905d-676a24ddfa12.svg')",
          }}
        >
          {index}
        </div>
        <div
          style={{
            fontSize: '16px',
            color: token.colorText,
            paddingBottom: 8,
          }}
        >
          {title || '--'}
        </div>
      </div>
      <div
        style={{
          fontSize: '15px',
          color: token.colorTextSecondary,
          textAlign: 'justify',
          lineHeight: '22px',
          marginBottom: 8,
        }}
      >
        {list.map((item: InfoItem, index: number) => {
          return (
            <div key={index}>
              <span>{item.label}:</span>
              <span>{item.value}</span>
            </div>
          );
        })}
      </div>
    </Card>
  );
};

export default InfoCard;
